<template>
  <Drawer :modelId="appId" ref="drawerRef"></Drawer>
  <Row :gutter="[24, 8]">
    <Col v-for="app in appList" :key="app.appId" :lg="6" :md="12">
      <Card
        :bordered="true"
        class="shadow-lg"
        style="height: 200px; min-width: 400px; width: 100%; border-radius: 10px"
      >
        <div class="flex h-full w-full">
          <div class="w-full">
            <span class="text-18px">{{ app.name }}</span>

            <div class="overflow-hidden mt-10px">
              <div class="float-left">挂载文件系统数:</div>
              <div
                class="
                  w-26px
                  h-26px
                  float-left
                  bg-sl-slBlue
                  rounded-1/2
                  flex
                  justify-center
                  text-12px
                  items-center
                  text-sl-slWhite
                  ml-10px
                "
              >
                {{ app.fileSystemResourceNum }}
              </div>
            </div>
            <div class="flex mt-75px" v-if="app.ifSupportFileSystem === true">
              <div
                class="
                  transition
                  duration-500
                  ease-in-out
                  mr-10px
                  w-150px
                  h-35px
                  rounded-15px
                  bg-sl-slBlue
                  font-bold
                  flex
                  justify-center
                  items-center
                  cursor-pointer
                  transform
                  hover:scale-103
                  text-sl-slWhite
                "
                @click="openDrawer(app)"
              >
                查看文件系统
                <img class="ml-10px w-20px h-20px" src="../../../assets/svg/authorize.svg" />
              </div>
            </div>
            <div class="flex mt-75px" v-else-if="app.ifSupportFileSystem === false" disabled>
              <div
                :class="formOnlyRead"
                class="
                  transition
                  duration-500
                  ease-in-out
                  mr-10px
                  w-150px
                  h-35px
                  rounded-15px
                  bg-sl-slGray
                  font-bold
                  flex
                  justify-center
                  items-center
                  cursor-pointer
                  transform
                  hover:scale-103
                  text-sl-slWhite
                "
              >
                不支持文件系统
                <img class="ml-10px w-20px h-20px" src="../../../assets/svg/authorize.svg" />
              </div>
            </div>
          </div>
          <div>
            <img :src="app.logo" class="h-100px w-100px rounded-50px" />
          </div>
        </div>
      </Card>
    </Col>
  </Row>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { Card, Col, Row } from 'ant-design-vue';
import { getAllApp } from '/@/api/system-mgmt/appfs-mgmt/appfs';
import { SubAppInfo } from '/@/api/system-mgmt/app-mgmt/model/appModel';
import Drawer from './fileSystemDrawer.vue';

let appList = ref<SubAppInfo[]>();

let drawerRef = ref(null);

let appId = ref<string>('');

const getAppInfo = async function getSubAppListInfo() {
  appList.value = await getAllApp();
};

getAppInfo();

function openDrawer(app) {
  appId.value = app.appId;
  nextTick(() => {
    drawerRef.value.openDrawer(app.architecture);
  });
}
</script>

<style lang="less">
.saaslanding-appinfo {
  .ant-col {
    border: 1px solid;
  }
}

.formOnlyRead {
  pointer-events: none;
}
</style>
